<template>
	<view class="page">
		<view class="" style="height: 5px; width: 100%;">

		</view>
		<view class="hehuoren" @click="toSelectPar">
			<image src="/static/img/index/hhr.png" style="width: 28px; height: 28px; margin-right: 5px;"
				mode="widthFix"></image>
			<view class="hehuoren-right">
				<view class="hehuoren-right-left">
					<view class="title">
						{{PartnerDate.userName}} {{PartnerDate.phone}}
					</view>
					<view class="text" v-if="PartnerDate.inviteCode">
						合伙人{{PartnerDate.inviteCode}}
					</view>
				</view>

				<image src="/static/img/index/ic_next_black.png" style="width: 10px; height: 14px; margin-right: 5px;"
					mode="widthFix"></image>

			</view>
		</view>
		
		<view class="hehuoren" @click="toSelectOrder" style="margin-top: 15px;">
			<image src="/static/img/index/order.png" style="width: 28px; height: 28px; margin-right: 5px;"
				mode="widthFix"></image>
			<view class="hehuoren-right">
				<view class="hehuoren-right-left">
					<view class="title">
						{{selectedOrder.title || "选择订单"}}
					</view>
					<view class="text" v-if="selectedOrder.sysOrderNo">
						订单号：{{selectedOrder.sysOrderNo}}
					</view>
				</view>

				<image src="/static/img/index/ic_next_black.png" style="width: 10px; height: 14px; margin-right: 5px;"
					mode="widthFix"></image>

			</view>
		</view>
		<view class="list-box">
			<view class="list-box-title">
				<view class="">
					选择划拨
				</view>
				<view class="filter-text" @click="showFilterPopup">筛选</view>
			</view>
			<view class="list-box-list">
				<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption"
					@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
					<u-checkbox-group @change="checkboxGroupChange">
						<view class="listitem" v-for="(item,index) in goods">

							<view class="">
								<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.snNo"
									shape="circle"></u-checkbox>
							</view>
							<view class="listitem-right">
								<view class="right-title disflex">
									<view class="disflex" @click="copy(item.snNo)">
										<text>{{item.snNo}}</text>
										<image src="/static/img/index/copy.png" mode="widthFix"
											style="width: 20px; height: 14px; margin-left: 5px;"></image>
									</view>
									<view class="right-title-right">
										￥{{item.fee || 0.00}}
									</view>
								</view>
								<view class="disflex right-concent">

									<view class="cptype" v-if="item.cp == '0'">电签</view>
									<view class="cptype" v-else>大POS</view>

									<view class="Free">
										{{item.remarks || '服务费金额'}}
									</view>
								</view>

							</view>
						</view>
					</u-checkbox-group>
				</mescroll-uni>
			</view>
		</view>
		<view class="footer disflex">
			<u-checkbox v-model="checked" shape="circle" @change="onChange0">{{checkedtext}}</u-checkbox>
			<view class="addman-footer-button">
				<view class="addman-footer-number">
					共（{{goodstotal}}）台
				</view>
				<view class="newAddress" @click="querenHB">
					确定划拨{{result.length}}
				</view>
			</view>
		</view>
		
		<!-- 筛选弹出框 -->
		<u-popup v-model="filterPopupShow" mode="center" width="80%" border-radius="10">
			<view class="popup-box">
				<view class="popup-box-title">SN号筛选</view>
				<view class="popup-box-line"></view>
				
				<view class="martop">开始SN</view>
				<view class="popup-box-input">
					<input type="text" v-model="filterForm.startSn" placeholder="请输入开始SN" />
					<image src="/static/img/index/close.png" v-if="filterForm.startSn" @click="filterForm.startSn = ''" class="clearimg" style="width: 20px; height: 20px;" mode="widthFix"></image>
				</view>
				
				<view class="martop">结束SN</view>
				<view class="popup-box-input">
					<input type="text" v-model="filterForm.endSn" placeholder="请输入结束SN" />
					<image src="/static/img/index/close.png" v-if="filterForm.endSn" @click="filterForm.endSn = ''" class="clearimg" style="width: 20px; height: 20px;" mode="widthFix"></image>
				</view>
				
				<view class="queryBut-box">
					<button class="chongzhiBut" @click="resetFilter">重置</button>
					<button class="queryBut" @click="applyFilter">筛选</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				checkedtext: '全选',
				PartnerDate: {
					userName: '选择合伙人',
					phone: '',
					inviteCode: ''
				},
				selectedOrder: {
					title: '',
					batchNo: '',
					sysOrderNo: ''
				},
				show: false,
				downOption: {
					auto: true //  false 不自动加载 (mixin已处理第一个tab触发downCallback)  true
				},
				goods: [],
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无相关数据', // 提示
					},
				},
				hbform: {
					"phone": "",
					"sn": "",
					"type": "1",
					"batchNo": ""
				},
				result: [],
				goodstotal: '',
				height: 0, // 添加height属性用于mescroll组件
				checked: false, // 添加checked属性用于全选复选框
				filterPopupShow: false, // 筛选弹出框显示状态
				filterForm: {
					startSn: '',
					endSn: ''
				}
			}
		},
		onLoad(o) {


		},
		onShow() {
			// this.getproductlist();
			// this.getfeelist();
			uni.$off('selectPartnerDate');
			// 监听全局的自定义事件
			uni.$on('selectPartnerDate', data => {
				// console.log(data);
				this.PartnerDate = data.item
			})
			
			uni.$off('selectOrderDate');
			// 监听选择订单的自定义事件
			uni.$on('selectOrderDate', data => {
				this.selectedOrder = data.item
				// 选择订单后，重新加载列表
				this.mescroll.resetUpScroll()
			})
		},
		methods: {
			// 显示筛选弹出框
			showFilterPopup() {
				this.filterPopupShow = true;
			},
			
			// 重置筛选条件
			resetFilter() {
				this.filterForm.startSn = '';
				this.filterForm.endSn = '';
			},
			
			// 应用筛选条件
			applyFilter() {
				this.filterPopupShow = false;
				// 重置列表并使用新的筛选条件加载数据
				this.mescroll.resetUpScroll();
			},
			
			// 初始化mescroll，设置高度
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// 计算列表区域的高度
				const query = uni.createSelectorQuery().in(this);
				query.select('.list-box-list').boundingClientRect(data => {
					if (data) {
						this.height = data.height;
					} else {
						// 如果直接获取不到，设置一个默认高度
						const windowHeight = uni.getSystemInfoSync().windowHeight;
						this.height = windowHeight - 280; // 减去顶部和底部的高度
					}
				}).exec();
			},
			copy(e){
				uni.setClipboardData({
					data: e,
					success: function () {
						uni.showToast({
							title:'已复制',
							icon:'none'
						});
					}
				});
			},
			// 报错提示
			showErrorToast(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},
			querenHB() {

				if (!this.PartnerDate.phone) {
					this.showErrorToast('请选择选择合伙人');
					return;
				} else if (!this.result.length) {
					this.showErrorToast('请选择划拨的机具');
					return;
				} else if (!this.selectedOrder.batchNo) {
					this.showErrorToast('请选择订单');
					return;
				} else {
					this.subitt();
				}


			},
			subitt() {
				this.hbform.phone = this.PartnerDate.phone
				this.hbform.sn = this.result.join(',')
				this.hbform.batchNo = this.selectedOrder.batchNo || ''

				this.terminalhb();
				uni.showLoading({
					title: '',
					mask: true
				})
			},

			async terminalhb() {
				const res = await util.request2(api.terminalhbUrl, {
						...this.hbform
					},
					'POST');
				// console.log(res);
				if (res.code != 0) {

					uni.hideLoading({})
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				} else {
					uni.hideLoading({})
					uni.showToast({
						title: '划拨成功',
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)

				}
			},
			checkboxChange(e) {
				// console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
				this.result = e;
			},
			onChange0(e) {

				this.checked = e.value
				// console.log(this.checked);
				this.checkedall(this.checked);
			},
			// 全选按钮
			checkedall(newValue) {
				let result = [];
				if (newValue) {
					for (let i = 0; i < this.goods.length; i++) {
						result.push(this.goods[i].snNo.toString());

					}
					this.goods.map(val => {
						val.checked = true;
					})
				} else {
					if (this.result.length === this.goods.length) {
						result = [];
					}
					this.goods.map(val => {
						val.checked = false;
					})
				}
				this.result = result

				// console.log(this.result);
				this.checkArrayLength();
				// console.log(this.data.result);
			},
			// 监听全选按钮
			checkArrayLength() {
				if (this.result.length === this.goods.length) {
					this.checked = true

				} else {
					this.checked = false
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 如果没有选择订单，不进行加载
				if (!this.selectedOrder.batchNo) {
					this.mescroll.endSuccess(0);
					return;
				}
				
				//联网加载数据
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				
				// 构建请求参数，添加筛选条件
				let params = {
					page: pageNum,
					limit: pageSize,
				};
				
				// 添加SN筛选条件
				if (this.filterForm.startSn) {
					params.startSn = this.filterForm.startSn;
				}
				if (this.filterForm.endSn) {
					params.endSn = this.filterForm.endSn;
				}
				
				const res = util.request(
					api.terminalAllocationOrderList + '/' + this.selectedOrder.batchNo, 
					params, 
					'POST'
				).then(res => {
					console.log(res);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					let totalSize = res.data.total;
					this.goodstotal = res.data.total;
					
					// 处理返回数据，将rows转为records，并转换字段
					let records = [];
					if (res.data.rows && res.data.rows.length > 0) {
						records = res.data.rows.map(item => {
							return {
								snNo: item.snNo || '',
								fee: item.fee || 0,
								cp: item.cp || '0',
								checked: false,
								remarks: item.remarks || ''
							};
						});
					}
					
					this.mescroll.endBySize(records.length, totalSize);
					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(records); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			toSelectPar() {
				uni.navigateTo({
					url: '/pages/myEquipment/SelectPartner',

					events: {
						selectOtherAddr: (data) => {

							// console.log(data.item);

						},
					},
					success: (res) => {

						res.eventChannel.emit('SelectPartner', {
							data: '选择合伙人'
						})
					}
				})
			},
			toSelectOrder() {
				uni.navigateTo({
					url: '/pages/myEquipment/SelectOrder',
					events: {
						selectOrder: (data) => {
							// console.log(data.item);
						},
					},
					success: (res) => {
						res.eventChannel.emit('SelectOrder', {
							data: '选择订单'
						})
					}
				})
			},
		}
	}
</script>
<style>
	.mescroll-upwarp {
		min-height: 0rpx !important;
	}
</style>
<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F7F7F7;
		padding: 1rpx;
		display: flex;
		flex-direction: column;
	}

	.hehuoren {
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hehuoren-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hehuoren-right-left {
		.title {
			font-size: 36rpx;
			font-weight: 600;

		}
	}

	.list-box {
		margin-top: 30rpx;
		flex: 1;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;
		// overflow-y: scroll;
	}

	.list-box-title {
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #000;
	}

	.list-box-title-right {
		color: #8a8a8a;
		display: flex;
		align-items: center;
	}
	
	.filter-text {
		color: #2F6DFE;
		font-size: 28rpx;
	}

	.list-box-list {
		// width: 100%;
		padding: 10rpx;
		margin-top: 10rpx;
		height: calc(100% - 70rpx);
	}

	.footer {
		height: 100rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 10rpx 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.newAddress {
		background-color: #2F5FE5;
		text-align: center;
		padding: 10rpx;
		// flex: 0.5;
		/* margin: 0 auto; */
		border-radius: 10rpx;
		line-height: 60rpx;
		color: #fff;
	}

	.addman-footer-button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.addman-footer-number {
		// margin-right: -20%;
	}

	.listitem {
		border-bottom: 1rpx solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.listitem-right {
		flex: 1;
		margin-right: 10rpx;
	}

	.disflex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.right-title {
		margin-top: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #000;
	}

	.right-title-right {
		margin-left: 50rpx;
		font-size: 32rpx;
		color: #000;
	}

	.right-concent {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.cptype {
		color: #2F6DFE;
		padding: 10rpx 12rpx;
		border-radius: 40rpx;
		border: 1rpx solid #2F6DFE;
	}

	.Free {
		font-size: 32rpx;
		margin-left: 50rpx;
	}

	.popup-box {
		padding: 30rpx;
	}

	.popup-box-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
	}

	.popup-box-line {
		background-color: #E5E5E5;
		height: 2rpx;
		width: 100%;
		margin-top: 20rpx;
	}

	.martop {
		margin-top: 20rpx;
	}

	.popup-box-input {
		height: 64rpx;
		margin-top: 12rpx;
		position: relative;

		input {
			border: 2rpx solid #E5E5E5;
			border-radius: 10rpx;
			padding: 10rpx;
			padding-right: 60rpx;
		}

		.clearimg {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.queryBut-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 60%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.queryBut {
		// margin: 0 auto;
		width: 120rpx;
		height: 72rpx;
		background-color: #6A9FFB;
		font-size: 25rpx;
		padding: 0rpx;
		color: #fff;
		line-height: 72rpx;
		// margin-left: 25rpx;
	}

	.chongzhiBut {
		// margin: 0 auto;
		width: 120rpx;
		height: 72rpx;
		background-color: #F2F2F2;
		font-size: 25rpx;
		padding: 0rpx;
		color: #999999;
		line-height: 72rpx;
	}

	.radioList {
		display: flex;
		align-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
	}

	.radioList-item {
		width: 49%;
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.radioList-box {
		padding: 20rpx 10rpx;
	}
</style>